 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">安全中心</div>
      </div>
      <div class="content-con">
        <div>
          <div class="safe-title">
            <div class="title">
              谷歌验证
            </div>
          </div>
          <Row class="safe-content">
            <i-col span="16">
             <Tag color="success">{{isBind}}: 您{{isBind}}谷歌验证</Tag>
              <div class="text-red">提示:为了您的资金安全,请尽快绑定谷歌验证码!</div>
              <div>手机客户端下载地址: Android / IOS</div>
            </i-col>
            <i-col span="8" >
              <i-button @click="binding"  :disabled="bindTxt=='已绑定'?true:false" class="btn-green">{{bindTxt}}</i-button>

              <Modal
                v-model="modal1"
                width="500" title="绑定谷歌验证"
                @on-ok="handleSubmit" footer-hide>
                <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="110" class="safety-item">
                  <div class="modal-img" id="imgQr" ref="qrCodeDiv">
                  </div>
                  <div class="text-center mb-10"><span>请使用Google身份验证器扫描上方二维码</span></div>
                  <Form-item label="谷歌验证码" prop="code">
                    <i-input v-model="formValidate.code" size="large" placeholder="请输入谷歌验证码"></i-input>
                  </Form-item>
                  <Form-item>
                    <i-button @click="handleSubmit" class="save"  size="large">绑定</i-button>
                  </Form-item>
                </i-form>
              </Modal>
            </i-col>
          </Row>
        </div>
        <div style="margin-top: 15px;">
          <div class="safe-title">
            <div class="title">
              登录设置
            </div>
          </div>
          <Row class="safe-content">
            <i-col span="16">
              <Tag color="success" v-if="formLogin.login_safemode=='0'">已设置: 仅登录密码验证</Tag>
               <Tag color="success" v-else>已设置: 登录密码+谷歌组合验证</Tag>
              <div class="text-red">提示：建议绑定谷歌验证，若没有绑定谷歌验证，出现资金问题，本平台恕不负责！</div>
            </i-col>
            <i-col span="8" >
              <i-button @click="modal2 = true" style="background-color: rgb(0, 150, 136); color: white;">更换</i-button>
              <Modal
                v-model="modal2"
                width="500" title="登录设置"
                @on-ok="login" footer-hide>
                <i-form ref="formLogin" :model="formLogin" :rules="ruleLogin" label-position="right" :label-width="110" class="safety-item">
                  <Form-item label="验证方式" prop="login_safemode">
                    <Radio-group v-model="formLogin.login_safemode" size="large" vertical>
                      <Radio label="0">
                          <span>仅登录密码验证</span>
                      </Radio>
                      <Radio label="1">
                          <span>登录密码+谷歌组合验证（需绑定谷歌验证）</span>
                      </Radio>
                    </Radio-group>
                  </Form-item>
                  <Form-item label="谷歌验证码" prop="code">
                    <i-input v-model="formLogin.code" size="large" placeholder="请输入谷歌验证码"></i-input>
                  </Form-item>
                  <Form-item>
                    <i-button @click="login('formLogin')" class="save" size="large">确定</i-button>
                  </Form-item>
                </i-form>
              </Modal>
            </i-col>
          </Row>
        </div>
        <div style="margin-top: 15px;">
          <div class="safe-title">
            <div class="title">
              支付设置
            </div>
          </div>
          <Row class="safe-content">
            <i-col span="16">
              <Tag color="success" v-if="formPay.pay_safemode=='0'">已设置: 仅超级密码验证</Tag>
              <Tag color="success" v-else-if="formPay.pay_safemode=='1'">已设置: 仅谷歌验证</Tag>
              <Tag color="success" v-else-if="formPay.pay_safemode=='2'">已设置: 超级密码+谷歌组合验证</Tag>
               <Tag color="success" v-else>已设置: 无需验证</Tag>
              <div class="text-red">提示：建议绑定谷歌验证，若没有绑定谷歌验证，出现资金问题，本平台恕不负责！</div>
            </i-col>
            <i-col span="8" >
              <i-button @click="modal3 = true" style="background-color: rgb(0, 150, 136); color: white;">更换</i-button>
              <Modal
                v-model="modal3"
                width="500" title="超级密码设置"
                @on-ok="pay" footer-hide>
                <i-form ref="formPay" :model="formPay" :rules="rulePay" label-position="right" :label-width="110" class="safety-item">
                  <Form-item label="验证方式" prop="pay_safemode">
                    <Radio-group v-model="formPay.pay_safemode" size="large" vertical>
                      <Radio label="3">
                          <span>无需验证</span>
                      </Radio>
                      <Radio label="0">
                          <span>仅超级密码验证</span>
                      </Radio>
                      <Radio label="1">
                          <span>仅谷歌验证（需绑定谷歌验证）</span>
                      </Radio>
                      <Radio label="2">
                          <span>超级密码+谷歌组合验证（需绑定谷歌验证）</span>
                      </Radio>
                    </Radio-group>
                  </Form-item>
                  <Form-item label="谷歌验证码" prop="code">
                    <i-input v-model="formPay.code" size="large" placeholder="请输入谷歌验证码"></i-input>
                  </Form-item>
                  <Form-item>
                    <i-button @click="pay('formPay')" class="save" size="large">确定</i-button>
                  </Form-item>
                </i-form>
              </Modal>
            </i-col>
          </Row>
        </div>
      </div>
   </Card>
 </template>
<script>
import QRCode from 'qrcodejs2'
import { getQR, bindGoogle, changesLoginMode, changesPayMode } from '@/api/user'
export default {
  // name: 'safety_center',
  components: {
  },
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isBind: '未绑定',
      bindTxt: '绑定',
      modal1: false,
      modal2: false,
      modal3: false,
      formValidate: {
        code: ''
      },
      ruleValidate: {
        code: [
          {
            required: true,
            message: '请输入谷歌验证码',
            trigger: 'blur'
          }
        ]
      },
      formLogin: {
        login_safemode: this.$store.state.user.userInfo.login_safemode.toString(),
        code: ''
      },
      ruleLogin: {

        code: [
          {
            required: true,
            message: '请输入谷歌验证码',
            trigger: 'blur'
          }
        ]
      },
      formPay: {
        pay_safemode: this.$store.state.user.userInfo.pay_safemode.toString(),
        code: ''
      },
      rulePay: {

        code: [
          {
            required: true,
            message: '请输入谷歌验证码',
            trigger: 'blur'
          }
        ]
      },
      secret: ''
    }
  },
  mounted () {
    this.bindTxt = this.$store.state.user.userInfo.google_secret_key == null ? '绑定' : '已绑定'
    this.isBind=this.$store.state.user.userInfo.google_secret_key == null ? '未绑定' : '已绑定'
  },
  methods: {
    binding () {
      document.getElementById('imgQr').innerHTML = ''
      console.log(document.getElementById('imgQr').innerHTML)
      getQR(this.$store.state.user.userInfo.id)
        .then(res => {
          this.secret = res.data.secret
          setTimeout(() => {
            this.qrcodeCreated(res.data.qrcodeUrl)
          }, 100)
        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },
    // 表单验证
    handleSubmit () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          let data = {
            id: this.$store.state.user.userInfo.id,
            verifyCode: this.formValidate.code,
            secret: this.secret
          }
          bindGoogle(data)
            .then(res => {
              this.$Message.success('绑定成功!')
              this.bindTxt = '已绑定'
              this.secret = ''
              this.$store.dispatch('getUserInfo')
              this.formValidate.code = ''
              this.modal1 = !this.modal1
            })
            .catch(err => {
              this.$Message.error(err.msg)
            })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    // 二维码生成
    qrcodeCreated (qrurl) {
      new QRCode(this.$refs.qrCodeDiv, {
        text: qrurl,
        width: 200,
        height: 200,
        colorDark: '#333333', // 二维码颜色
        colorLight: '#ffffff', // 二维码背景色
        correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/H
      })
      this.modal1 = !this.modal1
    },
    login () {
      this.$refs['formLogin'].validate((valid) => {
        if (valid) {
          let data = {
            id: this.$store.state.user.userInfo.id,
            login_safemode: this.formLogin.login_safemode,
            verifyCode: this.formLogin.code
          }
          changesLoginMode(data)
            .then(res => {
              this.$Message.success(res.msg)
              this.formLogin.code = ''
              this.$store.dispatch('getUserInfo')
              this.modal2 = !this.modal2
            })
            .catch(err => {
              this.$Message.error(err.msg)
            })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    pay () {
      this.$refs['formPay'].validate((valid) => {
        if (valid) {
          let data = {
            id: this.$store.state.user.userInfo.id,
            pay_safemode: this.formPay.pay_safemode,
            verifyCode: this.formPay.code
          }
          changesPayMode(data)
            .then(res => {
              this.$Message.success(res.msg)
              this.formPay.code = ''
              this.$store.dispatch('getUserInfo')
              this.modal3 = !this.modal3
            })
            .catch(err => {
              this.$Message.error(err.msg)
            })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    }
  }
}
</script>

 <style lang="less">
   .modal-img{
    width: 200px;
    height: 200px;
    margin: 0 auto;
   }
     .modal-img img{
       width:90%;
       margin: 0 auto;
     }
   .text-center{
     text-align: center;
     padding-bottom: 15px;
     font-size: 14px;
     color: #666;
   }
   .safety-item .ivu-form-item-label{
     font-size: 14px;
   }
   .content-con{
     margin: 15px;
     .safe-title{
       height: 42px;
       line-height: 42px;
       padding: 0 15px;
       border-bottom: 1px solid #f6f6f6;
       color: #333;
       border-radius: 2px 2px 0 0;
       font-size: 14px;
       .title{
         background-color: #eee;
         color: #666;
         height: 18px;
         line-height: 18px;
         display: inline-block;
         padding: 0 6px;
         font-size: 12px;
         text-align: center;
       }
     }
     .safe-content{
       padding: 10px 15px;
       line-height: 24px;
       border-bottom: 1px solid #f6f6f6;
       .text-red{
         color: orangered;
       }
     }
   }
 </style>
